<template>
    <div class="map-container">
        <div id="mapDiv" ref="mapDiv"></div>
        <div class="control-panel">
            <p>本示例演示如何启动和禁止多边形编辑功能。</p>
            <input type="button" value="启动编辑" @click="enableEdit" />
            <input type="button" value="禁止编辑" @click="disableEdit" />
            <input type="button" value="获取禁止编辑多边形坐标" @click="getCurrentCoordinates" />
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: 'App4',
    data() {
        return {
            map: null as any,
            zoom: 14,
            polygon: null as any,
            // 跟踪多边形的编辑状态
            polygonEditable: false,

            coordinates: [
                {
                    // "longitude": 112.18178209613531,
                    // "latitude": 30.345295247959346
                    "longitude": 112.18178,
                    "latitude": 30.3453
                },
                {
                    "longitude": 112.17769632921325,
                    "latitude": 30.343658738976803
                },
                {
                    "longitude": 112.17791199302926,
                    "latitude": 30.337956071384642
                },
                {
                    "longitude": 112.18586739977485,
                    "latitude": 30.338339141782942
                },
                {
                    "longitude": 112.18586688641057,
                    "latitude": 30.34430150209288
                },
                {
                    "longitude": 112.18178209613531,
                    "latitude": 30.345295247959346
                }
            ]
        }
    },
    mounted() {
        this.initMap()

        // latitude
        // :
        // 30.3453
        // longitude
        // :
        // 112.18178


        // latitude
        // :
        // 30.34366
        // longitude
        // :
        // 112.1777

        // latitude
        // :
        // 30.34273
        // longitude
        // :
        // 112.13264

        // latitude
        // :
        // 30.33796
        // longitude
        // :
        // 112.17791


        // latitude
        // :
        // 30.33834
        // longitude
        // :
        // 112.18587

        // latitude
        // :
        // 30.3443
        // longitude
        // :
        // 112.18587

    },
    methods: {
        initMap() {
            try {
                // 确保T对象已加载
                if (!window['T']) {
                    console.error('天地图API加载失败');
                    return;
                }

                const T = window['T'] as any;
                const mapDiv = this.$refs.mapDiv as HTMLElement;

                if (!mapDiv) {
                    console.error('地图容器不存在');
                    return;
                }

                // 初始化地图对象
                this.map = new T.Map(mapDiv)

                // 设置显示地图的中心点和级别
                if (this.map) {
                    // 计算多边形中心点
                    const center = this.calculateCenterPoint(this.coordinates)

                    // 设置地图中心点为多边形中心
                    this.map.centerAndZoom(new T.LngLat(center.lng, center.lat), this.zoom)

                    // 允许鼠标滚轮放大地图
                    this.map.enableScrollWheelZoom()

                    // 创建多边形
                    this.createPolygon()
                }
            } catch (error) {
                console.error('地图初始化失败:', error)
            }
        },
        createPolygon() {
            try {
                const T = window['T'] as any

                // 将坐标转换为T.LngLat对象数组
                const points = this.coordinates.map((coord: any) => {
                    return new T.LngLat(coord.longitude, coord.latitude)
                })

                // 创建面对象
                this.polygon = new T.Polygon(points, {
                    color: "blue",
                    weight: 3,
                    opacity: 0.5,
                    fillColor: "#FFFFFF",
                    fillOpacity: 0.5
                })

                // 向地图上添加面
                if (this.map && this.polygon) {
                    this.map.addOverLay(this.polygon)
                }
            } catch (error) {
                console.error('创建多边形失败:', error)
            }
        },
        calculateCenterPoint(coordinates: any[]) {
            // 计算多边形中心点
            let lngSum = 0
            let latSum = 0

            coordinates.forEach(coord => {
                lngSum += coord.longitude
                latSum += coord.latitude
            })

            return {
                lng: lngSum / coordinates.length,
                lat: latSum / coordinates.length
            }
        },
        enableEdit() {
            try {
                if (this.polygon && typeof this.polygon.enableEdit === 'function') {
                    this.polygon.enableEdit()
                    // 更新编辑状态
                    this.polygonEditable = true
                }
            } catch (error) {
                console.error('启动编辑失败:', error)
            }
        },
        disableEdit() {
            try {
                if (this.polygon && typeof this.polygon.disableEdit === 'function') {
                    this.polygon.disableEdit()
                    // 更新编辑状态
                    this.polygonEditable = false
                }
            } catch (error) {
                console.error('禁止编辑失败:', error)
            }
        },
        // 获取所有标记为"禁止编辑"状态的多边形的坐标集合
        getDisabledEditPolygonsCoordinates() {
            const disabledPolygons = []

            // 检查当前多边形是否处于禁止编辑状态
            if (this.polygon && !this.polygonEditable) {
                try {
                    // 优化：优先从多边形对象获取最新坐标，确保拖动后的坐标能被正确获取
                    let points = null
                    let polygonCoords = []
                    let success = false

                    // 方法1: 尝试使用getLngLats方法（天地图多边形通常支持此方法）
                    if (typeof this.polygon.getLngLats === 'function') {
                        try {
                            points = this.polygon.getLngLats()
                            console.log('方法1 - 使用getLngLats获取的点:', points)

                            // 检查返回的数据结构
                            if (points && points.length > 0) {
                                // 处理可能的多层嵌套数组结构
                                if (Array.isArray(points[0])) {
                                    // 如果是嵌套数组 [ [lng, lat], [lng, lat] ]
                                    points = points[0]
                                }

                                polygonCoords = points.map((point: any) => {
                                    let lng, lat

                                    // 处理不同格式的坐标点
                                    if (typeof point === 'object') {
                                        if (point.lng !== undefined && point.lat !== undefined) {
                                            lng = point.lng
                                            lat = point.lat
                                        } else if (point.getLng && typeof point.getLng === 'function') {
                                            lng = point.getLng()
                                            lat = point.getLat()
                                        }
                                    } else if (Array.isArray(point) && point.length >= 2) {
                                        // 数组格式 [lng, lat]
                                        lng = point[0]
                                        lat = point[1]
                                    }

                                    return lng !== undefined && lat !== undefined ? { longitude: lng, latitude: lat } : null
                                }).filter(Boolean)

                                success = polygonCoords.length > 0
                            }
                        } catch (err) {
                            console.warn('getLngLats方法执行出错:', err)
                        }
                    }

                    // 方法2: 如果方法1失败，尝试直接从多边形的路径获取
                    if (!success && this.polygon.paths) {
                        try {
                            console.log('方法2 - 尝试从paths获取坐标:', this.polygon.paths)
                            const paths = this.polygon.paths

                            // 处理paths可能的不同格式
                            if (Array.isArray(paths)) {
                                if (Array.isArray(paths[0])) {
                                    // paths是嵌套数组 [[点1], [点2], ...]
                                    paths.forEach((path: any) => {
                                        if (Array.isArray(path)) {
                                            path.forEach((point: any) => {
                                                if (point.lng !== undefined && point.lat !== undefined) {
                                                    polygonCoords.push({ longitude: point.lng, latitude: point.lat })
                                                }
                                            })
                                        }
                                    })
                                }
                            }

                            success = polygonCoords.length > 0
                        } catch (err) {
                            console.warn('从paths获取坐标出错:', err)
                        }
                    }

                    // 方法3: 尝试使用toGeoJSON或类似方法获取标准格式
                    if (!success && typeof this.polygon.toGeoJSON === 'function') {
                        try {
                            const geoJSON = this.polygon.toGeoJSON()
                            console.log('方法3 - 使用toGeoJSON获取的地理数据:', geoJSON)

                            if (geoJSON && geoJSON.geometry && geoJSON.geometry.coordinates) {
                                // 处理GeoJSON格式
                                const coords = geoJSON.geometry.coordinates[0] // 假设是Polygon类型
                                if (Array.isArray(coords)) {
                                    polygonCoords = coords.map((coord: any[]) => ({
                                        longitude: coord[0],
                                        latitude: coord[1]
                                    }))
                                    success = true
                                }
                            }
                        } catch (err) {
                            console.warn('toGeoJSON方法执行出错:', err)
                        }
                    }

                    // 方法4: 直接从地图上获取所有覆盖物，然后找到我们的多边形
                    if (!success && this.map && typeof this.map.getOverlays === 'function') {
                        try {
                            const overlays = this.map.getOverlays()
                            console.log('方法4 - 从地图覆盖物中查找多边形:', overlays.length)

                            // 遍历覆盖物找到我们的多边形
                            for (let i = 0; i < overlays.length; i++) {
                                const overlay = overlays[i]
                                if (overlay === this.polygon && typeof overlay.getLngLats === 'function') {
                                    const overlayPoints = overlay.getLngLats()
                                    if (overlayPoints && overlayPoints.length > 0) {
                                        polygonCoords = overlayPoints.map((point: any) => ({
                                            longitude: point.lng || point[0],
                                            latitude: point.lat || point[1]
                                        }))
                                        success = true
                                        break
                                    }
                                }
                            }
                        } catch (err) {
                            console.warn('从地图覆盖物获取坐标出错:', err)
                        }
                    }

                    // 如果成功获取到了有效坐标，更新组件中的coordinates数据
                    if (success) {
                        // 更新组件中的坐标数据，确保后续操作使用最新坐标
                        this.coordinates = [...polygonCoords]
                        console.log('成功获取并更新了最新坐标:', polygonCoords)

                        disabledPolygons.push({
                            coordinates: polygonCoords,
                            timestamp: new Date().toISOString(),
                            note: '从多边形对象获取的最新坐标'
                        })
                    } else {
                        // 如果所有方法都失败，使用最后保存的坐标数据
                        console.warn('无法从多边形对象获取最新坐标，使用组件中保存的数据')
                        disabledPolygons.push({
                            coordinates: this.coordinates,
                            timestamp: new Date().toISOString(),
                            note: '使用组件中保存的坐标数据'
                        })
                    }
                } catch (error) {
                    console.error('获取多边形坐标失败:', error)
                    disabledPolygons.push({
                        coordinates: this.coordinates,
                        timestamp: new Date().toISOString(),
                        note: '发生错误，使用组件中保存的坐标数据'
                    })
                }
            } else {
                console.log('多边形不处于禁止编辑状态或不存在')
            }

            console.log('禁止编辑状态的多边形坐标:', disabledPolygons)
            return disabledPolygons
        },
        // 获取当前坐标的方法（用于测试）
        getCurrentCoordinates() {
            const disabledPolygons = this.getDisabledEditPolygonsCoordinates()
            alert(JSON.stringify(disabledPolygons, null, 2))
        }
    }
})
</script>

<style scoped>
.map-container {
    width: 100%;
    height: 100vh;
    position: relative;
}

#mapDiv {
    width: 100%;
    height: 400px;
}

.control-panel {
    padding: 10px;
}

.control-panel p {
    margin: 0 0 10px 5px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
}

.control-panel input {
    margin-left: 5px;
    font-size: 14px;
}
</style>
